<template>
  <div class="container-pt">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed title="列表" />
    <van-tabs v-model="active" animated swipeable>
      <van-tab v-for="item in cateList" :key="item.id" >
        <template #title>
          <div @click="changeHandle(item.id)">
            <i class="fa" :class="item.icon"  />{{ item.catename }}
          </div>
          </template>
        <article-list v-for="item in newList" :key="item.id" :item="item"></article-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import articleList from '@/components/article-list.vue'
import { articleCateList } from '@/api/article'
import { indexData } from '@/api'
export default {
  name: 'listPage',

  components: { articleList },
  data () {
    return {
      active: 0,
      cateList: [],
      id: '',
      newList: [],
      page: '1',
      limit: '20'
    }
  },
  async created () {
    const res = await indexData()
    this.cateList = res.data.allCate
    this.active = +this.$route.query.index
    this.id = this.$route.query.id
    this.upDataList()
  },

  methods: {
    async  upDataList () {
      const res1 = await articleCateList({ page: this.page, limit: this.limit, cateid: this.id })
      this.newList = res1.data.list.data
    },
    changeHandle (id) {
      this.id = id
      this.upDataList()
    }
  }
}
</script>

<style>
</style>
